<!DOCTYPE html>
<html>
  <head>
    <!-- 引入Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <style>
    .selected {
      color: red;
      background-color: #ffe6e6;
    }
    .selected-info {
      margin: 10px 0;
      padding: 8px;
      background: #f0f0f0;
      border-radius: 4px;
    }
  </style>
  <body>
    <!-- Vue应用挂载点 -->
    <div id="app">
      <!-- 使用自定义的主组件 -->
      <book-manager></book-manager>
    </div>

    <script>
      // 书籍行组件定义（显示单行书籍信息）
      const BookRow = {
        // 组件模板（显示书籍信息及操作按钮）
        template: `
          <tr
            :class="{'selected': isSelected}"
            @click="handleRowClick"
          >
            <!-- 显示序号（索引+1） -->
            <td>{{ index + 1 }}</td>
            <!-- 显示书名 -->
            <td>{{ book.name }}</td>
            <!-- 显示价格 -->
            <td>¥{{ book.price }}</td>
            <td>
              <!-- 减少数量按钮（disabled状态控制） -->
              <button @click="changeQuantity(-1)">-</button>
              <!-- 当前数量显示 -->
              {{ book.quantity }}
              <!-- 增加数量按钮 -->
              <button @click="changeQuantity(1)">+</button>
            </td>
            <td>
              <!-- 移除当前书籍按钮 -->
              <button @click="remove">移除</button>
            </td>
          </tr>
        `,
        // 接收父组件传递的属性
        props: ["book", "index", "selectedId"], // book: 书籍对象，index: 当前索引
        // 定义组件可触发的事件
        emits: ["change-quantity", "remove", "select"],
        computed: {
          isSlected() {
            return this.selectedId === this.book.id;
          },
        },
        methods: {
          handleRowClick(event) {
            //排除按钮点击
            if (!event.target.closest("button")) {
              this.$emit("select", this.book.id);
            }
          },
          // 数量调整方法
          changeQuantity(amount) {
            // 保证数量不小于1
            if (this.book.quantity + amount > 0) {
              // 触发数量变化事件（参数：索引，变化量）
              this.$emit("change-quantity", this.index, amount);
            }
          },
          // 移除当前书籍
          remove() {
            // 触发移除事件（参数：索引）
            this.$emit("remove", this.index);
          },
        },
      };

      // 添加书籍表单组件
      const AddBookForm = {
        template: `
          <tr>
            <!-- 显示新书序号 -->
            <td>{{ newIndex }}</td>
            <!-- 书名输入框（双向绑定） -->
            <td><input v-model="name" placeholder="书名"></td>
            <!-- 价格输入框（数字类型，双向绑定） -->
            <td><input v-model.number="price" type="number"></td>
            <!-- 默认数量显示 -->
            <td>1</td>
            <td>
              <!-- 确认添加按钮 -->
              <button @click="confirm">✓</button>
              <!-- 取消添加按钮 -->
              <button @click="cancel">×</button>
            </td>
          </tr>
        `,
        // 接收父组件传递的新书序号
        props: ["newIndex"],
        // 定义组件可触发的事件
        emits: ["add", "cancel"],
        // 组件内部数据（临时存储输入内容）
        data() {
          return {
            name: "", // 书名输入
            price: 0, // 价格输入
          };
        },
        methods: {
          // 确认添加方法
          confirm() {
            // 输入验证
            if (this.name && this.price > 0) {
              // 触发添加事件，传递新书数据
              this.$emit("add", {
                name: this.name,
                price: this.price,
              });
            }
          },
          // 取消添加方法
          cancel() {
            // 触发取消事件
            this.$emit("cancel");
            // 清空输入内容
            this.name = "";
            this.price = 0;
          },
        },
      };

      // 主组件（书籍管理）
      const BookManager = {
        template: `
          <div>
            <div v-if="selectedBook" class="selected-info">
              当前选中：{{ selectedBook.name }}
            </div>
            <!-- 书籍表格 -->
            <table>
              <thead>
                <tr>
                  <th>序号</th><th>书名</th><th>单价</th><th>数量</th><th>操作</th>
                </tr>
              </thead>
              <tbody>
                <!-- 循环渲染书籍行 -->
                <book-row 
                  v-for="(book, index) in books" 
                  :key="book.id"
                  :book="book"
                  :index="index"
                  :selected-id="selectedBookId"
                  @change-quantity="changeQuantity"
                  @remove="removeBook"
                  @selected="handleBookSelect"
                />
                <!-- 添加书籍表单（条件渲染） -->
                <add-book-form 
                  v-if="adding"
                  :new-index="books.length + 1"
                  @add="addBook"
                  @cancel="adding = false"
                />
              </tbody>
            </table>
            
            <!-- 总价显示 -->
            <div>总价：¥{{ total }}</div>
            
            <!-- 添加新书按钮（条件渲染） -->
            <button v-if="!adding" @click="adding = true">添加</button>
          </div>
        `,
        // 注册子组件
        components: { BookRow, AddBookForm },
        // 组件数据
        data() {
          return {
            // 书籍数据（初始示例数据）
            books: [
              { id: 1, name: "Vue入门", price: 68.5, quantity: 3 },
              { id: 2, name: "JS编程", price: 99, quantity: 2 },
            ],
            // 是否显示添加表单
            adding: false,
            selectedBookId: null, //选中状态哦
          };
        },
        // 计算属性
        computed: {
          // 计算总价
          total() {
            // 使用reduce累加器计算总价格
            return this.books.reduce((sum, b) => sum + b.price * b.quantity, 0);
          },
          selectedBook() {
            return this.books.find((b) => b.id === this.selectedBookId);
          },
        },
        // 组件方法
        methods: {
          handleBookSelect(bookId) {
            this.selectedBookId = bookId;
          },
          // 处理数量变化
          changeQuantity(index, amount) {
            // 根据索引修改对应书籍的数量
            this.books[index].quantity += amount;
          },
          // 移除书籍
          removeBook(index) {
            // 根据索引删除书籍
            this.books.splice(index, 1);
          },
          // 添加新书
          addBook(newBook) {
            // 向书籍列表添加新条目
            this.books.push({
              id: Date.now(), // 生成唯一ID（时间戳）
              ...newBook, // 展开新书属性
              quantity: 1, // 设置初始数量
            });
            // 关闭添加表单
            this.adding = false;
          },
        },
      };

      // 创建Vue应用
      const app = Vue.createApp({
        // 注册主组件
        components: { BookManager },
      });

      // 挂载到DOM元素
      app.mount("#app");
    </script>
  </body>
</html>
